import React from "react";
import ReactDom from 'react-dom';

import './Props.css'

class Father extends React.Component {
    state = {
        msg: "father msg",
        getVal: ''
    }
    handlerFn = (data) => {
        console.log('fafafafa接受值：' + data);
        this.setState({
            getVal: data
        })
    }
    render() {
        return (
            <div className='fatherBox'>
                <h1>父组件 <span>接受子组件传递过来的数据: {this.state.getVal}</span></h1>
                <Child handler={(data) => this.handlerFn(data)}></Child>
            </div>
        )
    }
}

//父向子传值 类组件 constructor 可写可不写

class Child extends React.Component {
    state = {
        msg: "child msg"
    }
    myClick = () => {
        this.props.handler(this.state.msg)
    }
    render() {
        return (
            <div className='childBox'>
                <h1>子组件</h1>
                <button onClick={this.myClick}>click</button>
            </div>
        )
    }
}


export default Father
